/*
 * @Author: [wcy]
 * @Date: 2021-12-06 13:43:58
 * @LastEditors: [wcy]
 * @LastEditTime: 2021-12-10 10:52:36
 * @Description: 
 */
import {
  request
} from "../../request/index.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {

    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧菜单
    currentIndex: 0,
    // 右侧滚动条离顶部的距离
    scrollTop: 0,
  },
  // 分类数据
  categoryList: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    /* web中的本地存储和小程序中的本地存储的区别
     web:localStorage.setItem("key","value") localStorage.getItem("key")
     小程序:wx.setStorageSync("key","value")  wx.getStorageSync("key")*/
    // 获取本地存储中的数据
    const localList = wx.getStorageSync("cates");
    // 判断
    if (!localList) {
      // 如果不存在数据 发送请求数据
      this.getCategoryList();
    } else {
      // 有旧的数据 定义过期时间
      if (Date.now() - localList.time > 1000 * 60) {
        // 重新发送请求
        this.getCategoryList();
      } else {
        // 使用旧的数据
        this.categoryList = localList.data;
        let leftMenuList = this.categoryList.map(v => v.cat_name);
        let rightContent = this.categoryList[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  // 获取分类数据
 async getCategoryList() {
    // request({
    //     url: "/categories"
    //   })
    //   .then(res => {
    //     this.categoryList = res.data.message;
    //     // 把接口的数据存到本地存储中
    //     wx.setStorageSync("cates", {
    //       time: Date.now(),
    //       data: this.categoryList
    //     });
    //     // 构造左侧的大菜单数据
    //     console.log(this.categoryList);
    //     let leftMenuList = this.categoryList.map(v => v.cat_name);
    //     // 构造右侧的商品数据
    //     let rightContent = this.categoryList[0].children;
    //     this.setData({
    //       leftMenuList,
    //       rightContent
    //     })
    //   })
    const res=await request({url:"/categories"});
    this.categoryList = res;
        // 把接口的数据存到本地存储中
        wx.setStorageSync("cates", {
          time: Date.now(),
          data: this.categoryList
        });
        // 构造左侧的大菜单数据
        console.log(this.categoryList);
        let leftMenuList = this.categoryList.map(v => v.cat_name);
        // 构造右侧的商品数据
        let rightContent = this.categoryList[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
  },
  // 左侧菜单的点击事件
  handleItemTap(e) {
    // 获取被点击标题身上的索引
    const {
      index
    } = e.currentTarget.dataset;
    let rightContent = this.categoryList[index].children;
    this.setData({
      currentIndex: index,
      scrollTop: 0,
      rightContent,
    })
  }
})